<template>
  <div class="login">
    <div class="back" @click="back">
      <van-image
        v-if="areaCode === 0"
        width="32rem"
        height="32rem"
        :src="require('@/assets/images/register/back@2x.png')"
      />
    </div>

    <div class="bg"></div>

    <div class="main">
      <van-image
        class="icon"
        width="128rem"
        height="128rem"
        :src="require('@/assets/images/login/logo@2x.png')"
      />

      <div class="title">您好，</div>
      <div class="title">欢迎来到众帮联盟</div>

      <div class="input-box">
        <div class="input u-flex">
          <div class="country u-flex">
            <van-image
              v-if="areaCode === 0"
              width="36rem"
              height="36rem"
              :src="require('@/assets/images/login/icon_China@2x.png')"
              @click="show = true"
            />
            <van-image
              v-if="areaCode === 1"
              width="36rem"
              height="36rem"
              :src="require('@/assets/images/login/icon_malaysia@2x.png')"
              @click="show = true"
            />
            <div class="phone" @click="show = true">
              {{ areaCode === 0 ? "+86" : "+60" }}
            </div>
            <van-image
              width="16rem"
              height="16rem"
              @click="show = true"
              :src="require('@/assets/images/login/icon_down@2x.png')"
            />
          </div>

          <input type="number" v-model="username" placeholder="请输入账号" />
        </div>

        <div class="input u-flex">
          <input
            :type="showPSW ? 'text' : 'password'"
            v-model="password"
            placeholder="请输入密码"
          />

          <div class="icon">
            <van-image
              v-if="showPSW"
              @click="showPSW = false"
              class="input-icon"
              width="36rem"
              height="36rem"
              :src="require('@/assets/images/login/login_icon_display@2x.png')"
            />

            <van-image
              v-if="!showPSW"
              @click="showPSW = true"
              class="input-icon"
              width="36rem"
              height="36rem"
              :src="require('@/assets/images/login/login_icon_hide@2x.png')"
            />
          </div>
        </div>
      </div>

      <div class="register" @click="register">免费注册</div>

      <div class="btn-box">
        <div class="btn" @click="login">登录</div>
      </div>
    </div>

    <van-popup v-model="show" position="bottom">
      <van-picker
        title="选择国家与地区"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import { Button, Toast } from "vant";
import { API_PATH } from "@/api/index.js";
import { USER_LOGIN } from "@/api/api.js";
import { setLocalStorage } from "@/util/local-storge.js";
// import { Field } from 'vant';
Vue.use(Field);
export default {
  name: "login",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      username: "",
      password: "",
      columns: ["中国（+86）", "马来西亚（+60）"],
      show: false,
      areaCode: 0,
      showPSW: false,
      code: "",
    };
  },
  watch: {
    areaCode(n) {
      switch (n) {
        case 0:
          // 中国
          this.code = "";
          break;

        case 1:
          // 马来西亚
          this.code = "60";
          break;

        default:
          break;
      }
    },
  },
  mounted() {},
  methods: {
    register() {
      this.$router.push({ name: "register" });
    },
    forgetPsw() {
      this.$router.push({ name: "forget" });
    },
    // async loginExec() {
    //   const { data } = await this.$reqGet(API_PATH, {
    //     method: USER_LOGIN,
    //     user_mobile: this.mobile,
    //     user_pwd: this.password
    //   });
    //   let loginSts = true;
    //   if (data.code != 200 || data.status != 'success' || data.data == '') {
    //     Toast(data.detail);
    //     loginSts = false;
    //     this.isLogining = false;
    //   } else {
    //     setLocalStorage({
    //       user_id: data.data.uid
    //     });
    //   }
    //   return loginSts;
    // },
    async login() {
      const { data } = await this.$reqPost(USER_LOGIN, {
        username: this.code + this.username,
        password: this.password,
      });
      if (data.status == 0) {
        Toast.fail(data.info);
      }
      if (data.status == 1) {
        let token = data.data.token;
        localStorage.removeItem("token");
        setLocalStorage({
          user_token: token,
        });
        let that = this;
        Toast.success({
          message: "登录成功!",
          onClose: function () {
            that.$router.push("/home");
          },
        });
      }
      // if(data.code == 101){
      // 	Toast.fail(data.detail);
      // }
      // if(data.code == 100){

      // }
    },
    onConfirm(value, index) {
      this.areaCode = index;
      this.show = false;
    },

    back() {
      this.$router.go(-1);
    },

    // async get(){
    // 	const { data } = await this.$reqGet(USER_TEST, {

    // 	});
    // }
  },
};
</script>

<style lang="scss" scoped>
.login {
  text-align: left;

  .back {
    position: absolute;
    left: 40rem;
    top: 30rem;
    z-index: 999;
  }

  .bg {
    background-image: url("../../assets/images/login/bg.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .main {
    padding: 0 40rem;
    position: relative;

    > .icon {
      margin-top: 276rem;
      margin-bottom: 20rem;
    }

    .title {
      font-size: 36rem;
      color: #343434;
      font-weight: bold;
      line-height: 52rem;
    }

    .input-box {
      margin-top: 60rem;

      .input {
        border: 2rem solid #eaeaea;
        border-radius: 44rem;
        height: 88rem;
        width: 670rem;
        overflow: hidden;
        position: relative;

        &:nth-child(1) {
          margin-bottom: 28rem;
        }

        .country {
          margin-left: 40rem;

          .phone {
            font-weight: bold;
            margin: 0 12rem 0 16rem;
            font-size: 24rem;
          }
        }

        input {
          border: 0;
          font-size: 28rem;
          width: 100%;
          margin-left: 24rem;

          &:placeholder {
            color: #999;
          }
          &:nth-child(1) {
            margin-left: 40rem;
          }
        }

        .icon {
          margin-right: 44rem;
        }
      }
    }

    .register {
      text-align: right;
      color: var(--theme);
      margin: 24rem 0 60rem;
      font-size: 24rem;
    }

    .btn-box {
      .btn {
        background: linear-gradient(137deg, #2cb1ff 0%, #2f81fe 100%);
        height: 88rem;
        color: #fff;
        text-align: center;
        line-height: 88rem;
        border-radius: 54rem;
        font-size: 36rem;
        box-shadow: 0px 4rem 12rem rgba(75, 150, 255, 0.3);
        font-weight: bold;
      }
    }
  }
}
</style>
